<template>
	<view class="page">
		<view class="title-bar">
			<uni-tag class="tag" v-if="info.select" text="置顶" :inverted="true" type="error" ></uni-tag>
			<view class="title">
				{{info.title}}
			</view>
		</view>
		<view class="author">
			{{info.author}} 
			<uni-dateformat :date="info.publish_date" format="yyyy-MM-dd hh:mm:ss" ></uni-dateformat>
		</view>
		<view class="content" v-html="info.content">
		</view>
		<!-- 富文本可以使用，mp-html  功能更强 -->
		<view class="viewNum">
			阅读 {{info.view_count}}
		</view>
	</view>
</template>

<script setup>
import { onMounted } from 'vue'
import { apiNoticeDetail } from '@/service/apis'
	const info = ref({})
	const props = defineProps({
		id: {
			type: String,
			required: true
		}
	})
	const getNoticeInfo = async()=>{
		const res = await apiNoticeDetail({id:props.id})
		info.value = res
	}
	onMounted(()=>{
		getNoticeInfo()
	})
</script>

<style lang="scss" scoped>
.page {
	padding: 30rpx;
	.title-bar {
		display: flex;
		gap: 10rpx;
		align-items: flex-start;
		color: #111;
		.tag {
			flex-shrink: 0;
		}
	}
	.author {
		font-size: 28rpx;
		color: #999;
		margin-top: 20rpx;
	}
	.content{
		padding:50rpx 0;
	}
	.viewNum{
		color:#999;
		font-size: 28rpx;
	}
}
</style>
